<template>
  <BaseDialog :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow"
              :title="title">
    <el-form
        ref="formRef"
        :model="state.dataForm"
        :rules="rules"
        label-width="80px"
        @submit="save"
    >
      <el-form-item label="请假事由" prop="reasons">
        <el-input type="textarea" clearable placeholder="请输入请假事由" v-model="state.dataForm.reasons"/>
      </el-form-item>
      <el-form-item label="请假时间" prop="time">
        <el-date-picker
            v-model="state.dataForm.time"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import {VacationModel} from "/@/api/demo/model/VacationModel";
import {insertVacation, updateVacation} from "/@/api/demo/VacationApi";
import {useUserStore} from "/@/store/modules/user";

const emit = defineEmits(['load'])
const state = reactive({
  dataForm: {
    vacationId: '',
    reasons: '',
    applyUser: '1',
    status: 1,
    orgId: "4",
    comId: '',
    startTime: '',
    endTime: '',
    time: [] as string[]
  } as VacationModel
})

const formRef = ref()
const loading = ref(false)
const isShow = ref(false)
const title = ref("")
const init = (titleValue: string, data: VacationModel) => {
  if (data) {
    state.dataForm = data
    state.dataForm.time = [data.startTime, data.endTime]
  }
  title.value = titleValue
  isShow.value = true
}
/**
 * 保存请假信息
 */
const save = async () => {
  await formRef.value.validate()
  loading.value = true
  if (state.dataForm.vacationId) {
    state.dataForm.startTime = state.dataForm.time[0]
    state.dataForm.endTime = state.dataForm.time[1]
    await updateVacation(state.dataForm, () => {
      loading.value = false
    })
  } else {
    const userStore = useUserStore()
    state.dataForm.applyUser = userStore.userId
    state.dataForm.orgId = userStore.orgId
    state.dataForm.comId = userStore.comId
    state.dataForm.status = 1
    state.dataForm.startTime = state.dataForm.time[0]
    state.dataForm.endTime = state.dataForm.time[1]
    await insertVacation(state.dataForm, () => [
      loading.value = false
    ])
  }
  emit('load')
  close()
}
/**
 * 关闭
 */
const close = () => {
  state.dataForm = {
    vacationId: '',
    reasons: '',
    applyUser: '',
    status: 1,
    orgId: '',
    comId: '',
    startTime: '',
    endTime: '',
  } as VacationModel
  isShow.value = false;
}

defineExpose({init})

const rules = {
  reasons: [
    {required: true, message: '请假事由不能为空', trigger: 'blur'},
    {min: 1, max: 255, message: '请假事由长度为1到255个字符', trigger: 'blur'}
  ],
  applyUser: [
    {required: true, message: '申请人不能为空', trigger: 'blur'},
  ],
  time: [
    {required: true, message: '假期范围不能为空', trigger: 'blur'},
  ]
}
</script>

<style scoped>

</style>